<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="pragma"   content="no-cache" />   
<meta http-equiv="Cache-Control" content="no-cache,must-revalidate" />   
<script type="text/javascript" src="../js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="../js/jquery.draggable-1.0.js"></script>
<script type="text/javascript" src="../js/jquery.resizable-1.0.js"></script>
<script type="text/javascript" src="../js/jquery.fishflow-1.0.js"></script>
<link rel="stylesheet" type="text/css" href="../css/fishflow.css"></link>
<title>最简单的案例</title>
<script language="javascript">
</script>
<!--[if lt IE 9]>
<?import namespace="v" implementation="#default#VML" ?>
<![endif]-->
</head>
<body>
<div id="dgxDemo"></div>
</body>
</html>

<script language="javascript">
var dfg = new fishflow({
	title : "FISHFLOW案例",
	renderTo : $("#dgxDemo"),
	width:800,
	height:600,
	editable:true,
	data:{
		//工具箱按钮
		toolBox : ["start","end","node"],
		//节点
		nodes:[
				{id:"startNode",name : "开始"          ,type : "start"    ,left : 20  ,top : 200 ,width : 24  ,height : 24},
				{id:"unit1"    ,name : "流程节点1"     ,type : "node"     ,left : 120 ,top : 200 ,width : 86  ,height : 24},
				{id:"unit2"    ,name : "流程节点2"     ,type : "task"     ,left : 320 ,top : 200 ,width : 86  ,height : 24},
				{id:"unit3"    ,name : "流程节点3"     ,type : "node"     ,left : 520 ,top : 200 ,width : 86  ,height : 24},
				{id:"unit31"   ,name : "流程节点3-1"   ,type : "node"     ,left : 460 ,top : 300 ,width : 100 ,height : 30},
				{id:"unit32"   ,name : "流程节点3-2"   ,type : "node"     ,left : 580 ,top : 300 ,width : 100 ,height : 30},
				{id:"unit321"  ,name : "流程节点3-2-1" ,type : "node"     ,left : 580 ,top : 400 ,width : 100 ,height : 30},
				{id:"endNode"  ,name : "结束"          ,type : "end"      ,left : 560 ,top : 600 ,width : 25  ,height : 24}
		],		
		//连接线
		lines:[
			{id:"line1"   , from : "startNode" ,to : "unit1"     ,name:"连线1",type : "linkLine" },
			{id:"line2"   , from : "unit1"     ,to : "unit2"     ,name:"连线2",type : "linkLine" },
			{id:"line3"   , from : "unit2"     ,to : "unit3"     ,name:"连线3",type : "linkLine" },
			{id:"line4"   , from : "unit3"     ,to : "unit31"    ,name:"连线4",type : "linkLine" },
			{id:"line5"   , from : "unit3"     ,to : "unit32"    ,name:"连线5",type : "linkLine" },
			{id:"line6"   , from : "unit32"    ,to : "unit321"   ,name:"连线6",type : "linkLine" },
			{id:"line7"   , from : "unit31"    ,to : "endNode"   ,name:"连线7",type : "linkLine" },
			{id:"line8"   , from : "unit321"   ,to : "endNode"   ,name:"连线8",type : "linkLine" }
		]		
	}
});

</script>